import React, { useState, useEffect } from 'react';
import { Word } from '../models/word';
import WordService from '../services/wordService';

const StudyPage: React.FC = () => {
  const [currentWord, setCurrentWord] = useState<Word | null>(null);
  const [showAnswer, setShowAnswer] = useState(false);
  const [studyList, setStudyList] = useState<Word[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadStudyPlan();
  }, []);

  const loadStudyPlan = async () => {
    try {
      const plan = await WordService.getTodaysStudyPlan();
      setStudyList(plan);
      if (plan.length > 0) {
        setCurrentWord(plan[0]);
      }
    } catch (error) {
      console.error('Failed to load study plan:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleKnow = async () => {
    if (currentWord) {
      await WordService.processWordResult(currentWord.id, true);
    }
    nextWord();
  };

  const handleDontKnow = async () => {
    if (currentWord) {
      await WordService.processWordResult(currentWord.id, false);
    }
    nextWord();
  };

  const nextWord = () => {
    setShowAnswer(false);
    const nextIndex = currentIndex + 1;
    if (nextIndex < studyList.length) {
      setCurrentIndex(nextIndex);
      setCurrentWord(studyList[nextIndex]);
    } else {
      setCurrentWord(null);
      // 学习完成
      alert('今日学习计划完成！');
    }
  };

  const toggleAnswer = () => {
    setShowAnswer(!showAnswer);
  };

  if (loading) {
    return <div className="study-page">加载中...</div>;
  }

  if (!currentWord) {
    return <div className="study-page">暂无需要学习的单词</div>;
  }

  return (
    <div className="study-page">
      <div className="progress-bar">
        <div
          className="progress-fill"
          style={{ width: `${((currentIndex) / Math.max(1, studyList.length)) * 100}%` }}
        ></div>
      </div>

      <div className="word-card">
        <div className="word-header">
          <h2 className="word-text">{currentWord.word}</h2>
          <span className="phonetic">{currentWord.phonetic}</span>
        </div>

        {showAnswer ? (
          <div className="word-details">
            <p className="translation">{currentWord.translation}</p>
            <div className="example-section">
              <p className="example">{currentWord.example}</p>
              <p className="example-translation">{currentWord.exampleTranslation}</p>
            </div>
          </div>
        ) : (
          <div className="hint">
            <p>点击显示释义</p>
          </div>
        )}

        <button className="show-answer-btn" onClick={toggleAnswer}>
          {showAnswer ? '隐藏释义' : '显示释义'}
        </button>
      </div>

      {showAnswer && (
        <div className="action-buttons">
          <button className="btn btn-know" onClick={handleKnow}>
            认识
          </button>
          <button className="btn btn-dont-know" onClick={handleDontKnow}>
            不认识
          </button>
        </div>
      )}
    </div>
  );
};

